<template>
  <view class="show-swiper">
    <swiper class="list-swiper" :autoplay="flag" :circular="flag" :current="current" duration="800" indicator-color="rgba(209, 201, 202, .5)"  indicator-active-color="#dddbc8" :indicator-dots="flag" interval="2000">
      <swiper-item v-for="(item, index) in topBannerData" :key="index" >
        <image class="slide-image" mode="scaleToFill" :src="item.picUrl" @click="handleSwipe(item)"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    topBannerData: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      current: 0,
      flag: true
    }
  },
  methods: {
    handleSwipe (item) {
      this.$emit('handleItem', item)
    }
  }
}
</script>

<style scoped>
.show-swiper,.list-swiper{
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}
.list-swiper {
  text-align: center;
  overflow: hidden;
  /* margin: 40rpx auto 40rpx auto; */
}
.list-swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(0,0,0,0.8);
  border-radius: 8rpx;
}
.show-swiper .slide-image{
  width: 100%;
  height: 100%;
  border-radius: 20rpx;
}
</style>
